<template>
  <div class="header">
    <div class="inner clearfix">
      <div class="fl">
        <a href="/" class="header-logo">
          <img src="../../assets/logo.png" width="auto" height="100%" style="padding-left: 10px"> </a>
      </div>
      <span></span>
      <!-- end logo -->
      <div class="fl">
        <el-menu :default-active="currentMenu" @select="onHeaderNavSelect" mode="horizontal" style="background-color: rgba(0, 0, 0, 0)">
          <template v-for="headerNav in headerMenuNavList">
            <el-menu-item :index="headerNav.name">{{headerNav.name}}</el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="fr">
        <div class="header-ctrl clearfix">
          <el-dropdown>
            <el-button type="primary" size="small" icon="setting">
              账号<i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <template v-for="accountNav in accountNavList">
                <el-dropdown-item>{{accountNav.name}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown @command="changeLanguage">
            <el-button type="primary" size="small" icon="setting">
              修改密码<i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <template v-for="item in languageOpsList">
                <el-dropdown-item :command="item.name" >{{item.name}}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- end list -->
    </div>
  </div>
</template>
<script>
  import {ACCOUNT_NAV_LIST, HEADER_MENU_NAV_LIST, LANGUAGE_OPS_LIST, go} from '@/config'
  export default {
    props: {
      currentMenu: ''
    },
    data () {
      return {
        language: this.$language,
        accountNavList: ACCOUNT_NAV_LIST,
        headerMenuNavList: HEADER_MENU_NAV_LIST,
        languageOpsList: LANGUAGE_OPS_LIST
      }
    },
    methods: {
      onHeaderNavSelect (key, keyPath) {
        this.headerMenuNavList.forEach(function (item) {
          if (item.name === key) {
            go(item.href)
            return
          }
        })
      },
      onAccountNavSelect (key, keyPath) {
        this.headerMenuNavList.forEach(function (item) {
          if (item.name === key) {
            go(item.href)
            return
          }
        })
      },
      changeLanguage (command) {
        this.$i18n.locale = command
      }
    }
  }
</script>
<style>
  .header {
    min-width: 1270px;
    width: 100%;
    border-top: 2px solid #1C89D5;
    height: 53px;
    background: #fff
  }
  .inner {
    margin: 0 auto
  }
  .clearfix:after {
    display: block;
    content: " ";
    height: 0;
    visibility: hidden;
    clear: both
  }
  .fl {
    float: left
  }
  .fr {
    float: right
  }
  .header-logo {
    display: block;
    width: 200px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    font-size: 20px;
    overflow: hidden
  }
  .header-logo img {
    vertical-align: top
  }
  .header-ctrl {
    margin-top: 10px;
    padding-right: 20px
  }
</style>
